<!DOCTYPE html>
<html>
<head>
  <title>滚动加载</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
      word-break: break-all;
    }
    .scroll-content{
      box-sizing: border-box;
      width: 300px;
      height: 400px;
      margin: 80px auto;
      overflow: hidden;
      background: #ccc;
    }
    .scroll-content .scroll{
      box-sizing: border-box;
      height: 100%;
      overflow: auto;
    }
    .scroll-content .scroll .scroll-body{
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="scroll-content">
    <div class="scroll">
      <div class="scroll-body">
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item">ssssssssssssssssssssssssssssssssssss</div>
        <div class="item" id="test">ssssssssssssssssssssssssssssssssssss</div>
      </div>
    </div>
  </div>
<script type="text/javascript">
  console.log(document.getElementsByClassName('scroll')[0].offsetHeight)
  console.log(document.getElementsByClassName('scroll')[0].offsetWidth)
  // document.getElementsByClassName('scroll')[0].onscroll= function(e) {
  //   console.log(this.scrollTop, this.getBoundingClientRect())
  // }

  ;(function(global) {
    var roundRectDown = function (rect) {
      return {
        top: Math.floor(rect.top),
        left: Math.floor(rect.left),
        bottom: Math.floor(rect.bottom),
        right: Math.floor(rect.right),
      };
    }

    function normalizeRect (rect) {
      if (rect.width === undefined) {
        rect.width = rect.right - rect.left;
      }

      if (rect.height === undefined) {
        rect.height = rect.bottom - rect.top;
      }

      return rect;
    }

    document.getElementsByClassName('scroll')[0].onscroll= function(e) {
      var top = this.offsetHeight + this.scrollTop;
      var a = document.getElementsByClassName('scroll-body')[0].offsetHeight;
      if (top >= (a - 30)) {
        console.log('加载。。。。。')
      }
      console.log(
        // normalizeRect(roundRectDown(document.getElementById('test').getBoundingClientRect())), 
        document.getElementById('test').offsetHeight,
        a - this.scrollTop,
        this.offsetHeight
        // normalizeRect(roundRectDown(this.getBoundingClientRect())),
        // document.getElementsByClassName('scroll-body')[0].offsetHeight,
        // this.offsetHeight + this.scrollTop
      )
    }
  })(window)
</script>
</body>
</html>